import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Icon, Input, message, Radio, Row, Select} from 'antd';
import CompanySelect from '../../common/companySelect';
const R = require('ramda');
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

const quoCustomerDetail = Form.create()(class QuoCustomerDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cstId: null
        }
    }

    returnCst = () => {
        return this.state.cstId
    }

    getCustomet = () => {
        let nameOrCusNo = this.props.form.getFieldValue("nameOrCusNo");
        if (!nameOrCusNo) {
            message.info("请输入查询条件");
            return;
        }

        this.props.dispatch({
            type: "company/getListByNameAndCusNo",
            payload: {
                nameOrCusNo,
                onSuccess: () => {
                    this.props.form.setFieldsValue({ selectableCst: undefined });
                }
            }
        });
    }

    handleChange = (value) => {
        (this.props.company.companyList ? this.props.company.companyList : []).map((row) => {
            if (row.id === value) {
                this.setState({ cstId: row.id });
                if(this.props.isOrder){
                    this.props.form.setFieldsValue(R.pick(['shortname', 'companyName', 'cstOrigination', 'cstProperty', 'contact', 'email', 'mobile', 'statementType'], row));
                }else {
                    this.props.form.setFieldsValue(R.pick(['shortname', 'companyName', 'contact', 'email', 'mobile', 'telephone', 'level'], row));
                }
                this.props.dispatch({
                    type: 'company/getCompanyById',
                    payload: {
                        id: row.id
                    }
                })
            }
        })
    };

    clearOrSave = () => {
        if (this.state.cstId) {
            this.props.form.resetFields(['shortname', 'companyName', 'cstOrigination', 'cstProperty', 'contact', 'mobile', 'email', 'statementType', 'telephone', 'level']);
            this.setState({ cstId: undefined })
        }
    }

    form = {};
    checkCstInfo = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            let data = R.omit(['nameOrCusNo, selectableCst'])(values);
            data.id = this.props.company.dataSource && this.props.company.dataSource.id ? this.props.company.dataSource.id : null;
            //data.serviceItem = "1"
            this.form = { ...data };
        })
        return this.form;
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { xs: { span: 8 }, sm: { span: 8 } }, wrapperCol: { xs: { span: 15 }, sm: { span: 14 } } };
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let quickBookingData = this.props.quickBooking.dataSource ? this.props.quickBooking.dataSource : {};
        let quotationData = this.props.quotationFee.dataSource && this.props.quotationFee.dataSource.customer ? this.props.quotationFee.dataSource.customer : {};
        let options = [];
        let dataList = R.isNil(this.props.company) ? null : this.props.company.companyList;
        for (let i in dataList) {
            options.push(<Option value={dataList[i].id}>{dataList[i].companyName}</Option>)
        }
        let isOrder = this.props.isOrder;
        return (
            <div>
                <Row>
                    <Col span={12} style={{ display: this.props.cstEdit ? 'none' : 'inline-block' }}>
                        <FormItem {...formItemLayout} label="客户查询">
                            {getFieldDecorator('selectableCst', {})(
                                <CompanySelect style={{ width: '100%' }} allowClear onChange={this.handleChange.bind(this)}/>
                            )}
                        </FormItem>
                    </Col>

                        <Col span={3} style={{ marginBottom: 15, marginRight: 10, float: 'right', display: this.props.cstEdit ? 'none' : (this.props.cstInfoDisabled ? 'none' : 'inline-block') }} >
                            <Button type="primary" onClick={this.clearOrSave.bind(this)}>{"清空客户"}</Button>
                        </Col>
                    {/*<Col span={12} style={{ display: this.props.cstEdit ? 'none' : 'inline-block' }}>*/}
                    {/*    <FormItem {...formItemLayout} label="可选客户">*/}
                    {/*        {getFieldDecorator('selectableCst')(*/}
                    {/*            <Select style={{ width: '100%' }} */}
                    {/*                    onChange={this.handleChange.bind(this)}*/}
                    {/*                    allowClear disabled={this.props.isBooking ? false : this.props.disabled}*/}
                    {/*            >*/}
                    {/*                {options}*/}
                    {/*            </Select>*/}
                    {/*        )}*/}
                    {/*    </FormItem>*/}
                    {/*</Col>*/}
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="客户简称" hasFeedback>
                            {getFieldDecorator('shortname', {
                                rules: [{
                                    required: true, message: '请输入客户简称'
                                }],
                                initialValue: this.props.isBooking ? quickBookingData.shortname : (this.props.quoOrderDisabled ? quotationData.shortname : dataSource.shortname)
                            })(<Input disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} maxLength="20" />)}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="客户名称" hasFeedback>
                            {getFieldDecorator('companyName', {
                                rules: [{
                                    required: true, message: '请输入客户名称',
                                }],
                                initialValue: this.props.isBooking ? quickBookingData.cstName : (this.props.quoOrderDisabled ? quotationData.companyName : dataSource.companyName),
                            })(
                                <Input maxLength="200" disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} />
                            )}
                        </FormItem>
                    </Col>
                </Row>
            { isOrder ?
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="客户来源" hasFeedback>
                            {getFieldDecorator('cstOrigination', {
                                initialValue: this.props.quoOrderDisabled ? quotationData.cstOrigination : dataSource.cstOrigination,
                                rules: [{
                                    required: true, message: '请选择客户来源',
                                }]
                            })(
                                <Select disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )}>
                                    <Select.Option value="1">自主开发</Select.Option>
                                    <Select.Option value="2">转介绍</Select.Option>
                                </Select>
                                )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="客户性质" hasFeedback>
                            {getFieldDecorator('cstProperty', {
                                initialValue: this.props.quoOrderDisabled ? quotationData.cstProperty : dataSource.cstProperty,
                                rules: [{
                                    required: true, message: '请选择客户性质',
                                }]
                            })(
                                <RadioGroup disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )}>
                                    <Radio value="1">同行</Radio>
                                    <Radio value="2">直客</Radio>
                                </RadioGroup>
                                )}
                        </FormItem>
                    </Col>
                </Row>
            : ""}
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="联系人" hasFeedback>
                            {getFieldDecorator('contact', {
                                initialValue: this.props.quoOrderDisabled ? quotationData.contact :dataSource.contact,
                                rules: [{
                                    required: true, message: '请输入联系人',
                                }]
                            })(
                                <Input disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} maxLength="100" />
                                )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="邮箱" hasFeedback>
                            {getFieldDecorator('email', {
                                initialValue: this.props.quoOrderDisabled ? quotationData.email : dataSource.email,
                            })(
                                <Input disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} maxLength="50" />
                                )}
                        </FormItem>
                    </Col>
                    {/* <Col span={12}>
                        <FormItem {...formItemLayout} label="联系人岗位" hasFeedback>
                            {getFieldDecorator('contactPosition', {
                                initialValue: dataSource.contactPosition,
                                rules: [{
                                    required: true, message: '请选择联系人岗位！'
                                }]
                            })(<BizParams disabled={this.props.cstEdit ? this.props.disabled : (this.props.cstInfoDisabled ? true : this.state.cstId )} sprCode="position" style={{ width: '100%' }} />)}
                        </FormItem>
                    </Col> */}
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="移动电话" hasFeedback>
                            {getFieldDecorator('mobile', {
                                rules: [{
                                    required: this.props.isOrder ? false : true, message: '请输入移动电话！'
                                }],
                                initialValue: this.props.quoOrderDisabled ? quotationData.mobile : dataSource.mobile,
                            })(
                                <Input disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} maxLength="20" />
                                )}
                        </FormItem>
                    </Col>
                { isOrder ? 
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="结算方式" hasFeedback>
                            {getFieldDecorator('statementType', {
                                rules: [{
                                    required: true, message: '请选择结算方式！'
                                }],
                                initialValue: this.props.quoOrderDisabled ? quotationData.statementType : dataSource.statementType
                            })(
                                <RadioGroup disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )}>
                                    <Radio value="0">票结</Radio>
                                    <Radio value="1">月结</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                :
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="固定电话" hasFeedback>
                            {getFieldDecorator('telephone', {
                                initialValue: dataSource.telephone,
                            })(
                                <Input disabled={this.props.cstEdit ? this.props.disabled : (this.props.cstInfoDisabled ? true : this.state.cstId )} maxLength="20" />
                            )}
                        </FormItem>
                    </Col>
                }
                </Row>
            {isOrder ? null:
                <Row>
                    {/* <Col span={12}>
                        <FormItem
                            {...formItemLayout} label="客户类型" hasFeedback>
                            {getFieldDecorator('companyType', {
                                initialValue: dataSource.companyType,
                                rules: [{
                                    required: true, message: '请选择客户类型！'
                                }]
                            })(
                                <BizParams disabled={this.props.cstEdit ? this.props.disabled : (this.props.cstInfoDisabled ? true : this.state.cstId )} sprCode="logisticsCompany" style={{ width: '100%' }} />
                                )}
                        </FormItem>
                    </Col> */}
                    <Col span={12}>
                        <FormItem {...formItemLayout} label="等级" hasFeedback>
                            {getFieldDecorator('level', {
                                initialValue: dataSource.level,
                                rules: [{
                                    required: true, message: '请选择等级！'
                                }]
                            })(
                                <Select disabled={this.props.cstEdit ? this.props.disabled : (this.props.cstInfoDisabled ? true : this.state.cstId )} style={{ width: '100%' }} >
                                    <Select.Option value="1">优质</Select.Option>
                                    <Select.Option value="2">良好</Select.Option>
                                    <Select.Option value="3">普通</Select.Option>
                                    <Select.Option value="4">差</Select.Option>
                                </Select>
                                )}
                        </FormItem>
                    </Col>
                </Row>
            }
                {this.props.isBooking ?
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="订舱备注" hasFeedback>
                                {getFieldDecorator('remark', {

                                    initialValue: this.props.isBooking ? quickBookingData.remark : (this.props.quoOrderDisabled ? quotationData.companyName : dataSource.companyName),
                                })(
                                    <Input maxLength="200" disabled={this.props.isBooking ? true : this.props.cstEdit ? (this.props.quoOrderDisabled ? true : this.props.disabled) : (this.props.cstInfoDisabled ? true : this.state.cstId )} />
                                )}
                            </FormItem>
                        </Col>

                    </Row>
                    :  null  }
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.quotationFee, quotationFee: state.quotationFee, company: state.company, quickBooking: state.quickBooking
    };
}

export default connect(mapStateToProps)(quoCustomerDetail);